@keyframes slide-in {
    0%{
        transform: translateY(-90px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-top-bottom {
    from{
        opacity: 0;
        transform: translateY(80px);
        /* transform: scale(0.5); */
        /* scale:0.5; */
    }
    to{
        opacity: 1;
        transform: translateY(0px);
        /* transform: scale(1); */
        /* scale:1; */
    }
}

@keyframes slide-left {
    from{
        opacity: 0;
        transform: translateX(100px);
        /* transform: scale(0.9); */
        /* scale:0.5; */
    }
    to{
        opacity: 1;
        transform: translateX(0px);
        /* transform: scale(1); */
        /* scale:1; */
    }
}

@keyframes slide-out {
    from{
        opacity: 0;
        transform: translateX(-100px);
        /* transform: scale(0.9); */
        /* scale:0.5; */
    }
    to{
        opacity: 1;
        transform: translateX(0px);
        /* transform: scale(1); */
        /* scale:1; */

    }
}

@keyframes appear {
    from{
        opacity: 0;
        /* transform: translateX(-50px); */
        transform: scale(0.7);
        /* scale:0.5; */
    }
    to{
        opacity: 1;
        /* transform: translateX(0px); */
        transform: scale(1);
        /* scale:1; */

    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

html{
    scroll-behavior: smooth;
}

.fund-container{
    background-color: #f3f3f3;
    height: 500px;
    margin-top: 70px;
     padding-top: 10px;
    width: 100%;
}
.title2{
    font-family: oxygen;
    font-size:42px;
    font-weight: 700;
    color: #0083D7;
    margin-top: 30px;
    animation:slide-in 2s ease forwards;
}
h3{
    margin-top: 30px;
    text-align: center;
}
.fundimage{
    margin-top: 20px;
    max-width:100%;
    display: block;
    border-radius: 10px;
    height: 250px;
    box-shadow: 2px 2px 5px #000;
    
}
 .wrapper{
    width:90%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:40px;
    margin-top:20px;
    margin-inline:auto;
    animation :slide-top-bottom 3s ease-in-out;
}

.fundform{
    width: 100%;
    background-color: #8e8f91;
    height: 100px;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-left: 40px;
    padding-right: 50px;
    display: flex;
}

.fundtext{
    width: 70%;
    font-family: oxygen;
    font-size: 32px;
    color: #fff;
    font-weight: 600; 
}
a{
    text-decoration: none;
    color: #fff;
}
.startInvestment{
    text-align: center;
    align-content: center;
    width: 15%;
    height: 50px;
    background-color: #0083D7;
    border-radius: 10px;
    color: #fff;
    font-family:"Noto Sans";
    font-size: 18px;
    letter-spacing: 1px;
    animation: bounce 1s infinite; 
    animation-play-state: running; 
}

.startInvestment:active{
    background-color: #014670;
}

.investment{
    margin-top: 50px;
    width: 100%;
    height:400px;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.photu{
    align-content: center;
    width: 40%;
    height: 100%;
    animation :slide-out 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
.photu1{
    border-radius: 20px;
}
.description{
    width: 40%;
    height: 100%;
    margin-left: 40px;
    align-content: center;
    animation :slide-left 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.btninvestment{
    margin-top: 30px;
    text-align: center;
    align-content: center;
    width: 250px;
    height: 50px;
    background-color: #0083D7;
    border-radius: 50px;
    color: #fff;
    font-family:"Noto Sans";
    font-size: 18px;
    letter-spacing: 1px;
    margin-left: 170px;
}

.calculator{
       background-color: #e1e1e1;
       height: 400px;
       width: 100%;
       display: flex;
       justify-content: space-evenly;
       align-items: center;
       animation :slide-top-bottom 15s ease-in-out;
       animation-timeline: view();
       animation-range: entry 0% cover 40%;
}

.calculate{
    width: 30%;
    height: 90%;
    border:1px solid #000;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 10px;
}
.result{
    width: 60%;
    height: 90%;
    display: flex;
    padding-top: 40px;
    border:1px solid #000;
    border-radius: 10px;
}
.photu2{
    margin-left: 50px;
    height: 300px;
    width: 400px;
}

.calcontainer{
    margin-top:10px;
    margin-left: 100px;
}

.detail{
    color: #141414;
    font-family: "Noto Sans";
    font-weight: 600;
    font-size: medium;
    margin-bottom: 1px;
}
.inputbox{
    width:300px;
    margin-top:2px;
    outline: none;
    margin-left: 2px;
    margin-right: 0px;
}
.input{
    height: 40px;
    width: 90%;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
    font-size: 16px;
    border-style: none;
    margin-top: 5px;
    margin-bottom: 10px;
}

.input:disabled{
    background-color: #fff;
    color: #000;
}

.button{
    height: 40px;
    width: 100%;
    margin-top: 5px;
    margin-left: 30px;
    cursor: pointer;
}
.calculation{
    height:40px;
    width: 175px;
    border-radius: 10px;
    border-style: none;
    color: #FFFFFF;
    font-family: Oxygen;
    font-weight: bold;
    font-size: 20px;
    background-color: #2d8eca;
    margin-top: 7px;
    margin-left: 30px;
    cursor: pointer;
}

.calculation:active{
    background-color: #0063a1;
}

.sip{
    height: 80vh;
    width: 100%;
    background-image: url("SIP.jpg");
    background-size:cover;
    padding: 10px;
    margin-top: 40px;
    animation :appear 5s ease-in-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.siptext{
    font-family: "Noto Sans";
    font-weight: 600;
    font-size: 60px;
    text-align: center;
    margin-top: 150px;
    color: #002f4d;
    height: 150px;
}

.service{
    height: 240px;
}
.servicetext{
    margin-top: 40px;
    height:50px;
    font-family: "Noto Sans";
    font-weight: 600;
    font-size: 40px;
    text-align: center;
}

.mf{
    background-color: #8e8f91;
    height:100px;
}




@keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .logos {
    overflow: hidden;
    padding: 50px 0;
    background: white;
    white-space: nowrap;
    position: relative;
  }
  
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
  }
  
  .logos-slide img {
    height: 70px;
    margin: 0 40px;
  }



@media screen and (max-width:700px) {
     .fund-container{
        height: 1400px;
     }

     .title2{
        font-size: 30px;
        font-weight: 700;
     }
     .fundimage{
        margin-top: 0;
     }
     .wrapper{
        display: flex;
        margin-top: 10px;
        flex-direction: column;
        gap:10px;
     }

     .fundtext{
        width: 60%;
        font-size: 16px;
        padding: 0;
     }
     .startInvestment{
        width: 40%;
        font-size: 14px;
     }
    
     .investment{
        height: 500px;
        flex-direction: column;
        margin-top: 20px;
     }
     .photu{
        width: 80%;
     }
     .photu1{
        width: 100%;
        height: auto;
     }
     .description{
        width: 80%;
     }
     .btninvestment{
        margin-left: 50px;
     }

     .calculator{
        justify-content: center;
        flex-direction: column;
        height: 1000px;
        width: 100%;
     }
     .calcontainer{
        margin-left: 40px;
     }
     .button{
        width: 150px;
     }
     
     .calculation{
        width:150px
     }
     .calculate{
        width: 100%;
     }
     .result{
        width: 100%;
        flex-direction: column;
     }
     .photu2{
        margin-left: 0px;
        height: 300px;
        width: 350px;
     }

     .sip{
        height:50vh;
     }
      .servicetext{
        margin-top: 20px;
        height: 80px;
        font-size: 30px;
     }
     .service{
        height: 200px;
     }
     .siptext{
        margin-top:70px;
        font-size: 40px;
     }
     .mf{
        height: 80px;
     }
    .logos{
        padding: 20px 0;
    }
}

.backto-top-lic{
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #232F3E;
    transition: transform 0.3s ease;
}
.backto-top-home a:hover{
    transform: translateY(-5px);
}
@media(max-width:700px){
    .backto-top-lic{
     margin-bottom:-21px;
     padding-bottom: 5px;
    }
 }